<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>browse</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
    <#include "/include/new_resource.html"/>
</head>
<body>
<div class="main">
    <div class="browse-box">
        <div class="hd g-header">
            <div class="left">
                <div class="logo">
                    <a href="javascript:void(0);"><img src="${base}/static/images/logo.png" alt=""></a>
                </div>
            </div>
            <div class="right">
                <div class="component">
                    <div class="tabs">
                        <a href="${base}/admin/parameters/index">Parameters</a>
                        <a class="active"  href="${base}/admin/parameters/my_index">My Parameters</a>
                        <a href="${base}/report/list">Report</a>
                        <#if user.departmentId==1>
                            <a href="${base}/admin/userView/list">User</a>
                        </#if>
                    </div>
                    <#include "/include/user_info.html"/>
                </div>
            </div>
        </div>
        <div class="bd">
            <div class="sidebar">
                <div class="title">
                    Filters
                </div>
                <div class="serach-item">
                    <label>Client</label>
                    <div class="input-box">
                        <div id="select-client" class="xm-select-item"></div>
                    </div>
                </div>
                <div class="serach-item">
                    <label>Product Category</label>
                    <div class="input-box">
                        <div id="select-category" class="xm-select-item"></div>
                    </div>
                </div>
                <div class="filter-item">
                    <ul>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Photo Style</a>
                            <div class="childer">
                                <dl>
                                    <#if photoStyles??&&photoStyles?size gt 0>
                                    <#list photoStyles as t>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="photoStyle_mss"  value="${t.name!}" />
                                            <i></i>
                                            <span>${t.name!}</span>
                                        </label>
                                    </dd>
                                    </#list>
                                    </#if>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Lighting Style</a>
                            <div class="childer">
                                <dl>
                                    <#if lightingStyles??&&lightingStyles?size gt 0>
                                    <#list lightingStyles as t>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="lightingStyle_mss"  value="${t.name!}" />
                                            <i></i>
                                            <span>${t.name!}</span>
                                        </label>
                                    </dd>
                                    </#list>
                                    </#if>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Scene Style</a>
                            <div class="childer">
                                <dl>
                                    <#if sceneStyles??&&sceneStyles?size gt 0>
                                    <#list sceneStyles as t>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="sceneStyle_mss"  value="${t.name!}" />
                                            <i></i>
                                            <span>${t.name!}</span>
                                        </label>
                                    </dd>
                                    </#list>
                                    </#if>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Background Style</a>
                            <div class="childer">
                                <dl>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="photoType_mss"  value="White" />
                                            <i></i>
                                            <span>White</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="photoType_mss"  value="Creative" />
                                            <i></i>
                                            <span>Creative</span>
                                        </label>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);"><i class="icon"></i>Props</a>
                            <div class="childer">
                                <dl>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="props_mss"  value="Included" />
                                            <i></i>
                                            <span>Included</span>
                                        </label>
                                    </dd>
                                    <dd>
                                        <label class="g-checkbox">
                                            <input type="checkbox" name="props_mss"  value="Not included" />
                                            <i></i>
                                            <span>Not included</span>
                                        </label>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="serach-item">
                    <label>Creator</label>
                    <div class="input-box">
                        <input type="text" name="creator" id="creator"  placeholder="Search creator name" />
                        <i class="icon"></i>
                    </div>
                </div>
                <div class="time-item">
                    <label>Create Date</label>
                    <div id="preview-sticky" class="input-box">
                        <input id="litepicker" autocomplete="off" placeholder="Jan dd - Jan mm,yyyy" />
                        <i onclick="clearDate();"></i>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="serch">
                    <div class="form">
                        <form class="form-wrap" action="">
                            <div class="input-box">
                                <button class="submit-button" type="button"></button>
                                <input type="text" name="keyword" id="keyword" value="" placeholder="Enter a keyword" />
                            </div>
                            <div class="buttons">
                                <button id="Active" class="active" type="button" onclick="gotoQuery(this,1);">Active</button>
                                <button id="Deleted" type="button" onclick="gotoQuery(this,0);">Deleted</button>
                                <button id="All"  type="button" onclick="gotoQuery(this,null);">All</button>
                            </div>
                        </form>
                    </div>
                    <button class="create-button" onclick="create();">Create</button>
                </div>
                <div id="product-list">

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 遮罩层 -->
<div class="shade"></div>

<#include "/include/new_js_resource.html"/>
<script type="text/javascript">
    let clientName_select;
    let productCategory_select;
    let createDate_span;
    function create(){
        HF.goto("${base}/admin/parameters/summary_edit")
    }
    function edit(id){
        HF.goto("${base}/admin/parameters/summary_edit?id="+id);
    }
    function view(id){
        HF.goto("${base}/front/parameters/summary_info?id="+id);
    }
    function duplicate(id){
        layer.confirm('Confirm the duplicate action', {
            title:'Confirm',
            btn: ['confirm', 'cancel']
        }, function(index){
            $.ajax({
                type: "DELETE",
                url: "${base}/admin/template/duplicate?id="+id,
                dataType: "json",
                success: function(data){
                    console.log(data);
                    if(typeof(data)!='undefined'){
                        HF.Alert("successed");
                        document.location.reload();
                    }else{
                        HF.Alert("failure");
                    }

                },
                error:function(err){
                    console.log(err)
                    HF.Alert("failure");
                }
            });
        }, function(index){

        });
    }
    function del(id){
        layer.confirm('Confirm the delete action', {
            title:'Confirm',
            btn: ['confirm', 'cancel']
        }, function(index){
            $.ajax({
                type: "DELETE",
                url: "${base}/admin/template/delete?id="+id,
                dataType: "json",
                success: function(data){
                    console.log(data);
                    if(typeof(data)!='undefined'){
                        HF.Alert("successed");
                        document.location.reload();
                    }else{
                        HF.Alert("failure");
                    }
                },
                error:function(){
                    console.log(err)
                    HF.Alert("failure");
                }
            });
        }, function(index){

        });
    }

    function clearDate(){
        createDate_span.clearSelection();
    }
    function getPropValue(category) {
        let values = "";
        $.each($("input[name='"+category+"']:checked"),function(i,obj){
            if (i > 0) {
                values += ",";
            }
            values += this.value;
        })
        return values;
    }
    function getSelectValue(category) {
        let objects =category.getValue();
        let values = "";
        if(objects.length>0){
            values = objects.reduce((prev,cur)=>{
                if(prev&&prev.length>0){
                    return prev+","+cur.value;
                }else{
                    return cur.value;
                }
            },"")
        }
        return values;
    }
    function getSelectCompanyValue(category) {
        let objects = category.getValue();
        let values = "";
        if (objects.length > 0) {
            values = objects.reduce((prev, cur) => {
                if (prev && prev.length > 0) {
                return prev + "$$" + cur.name;
            } else {
                return cur.name;
            }
        }, "")
        }
        return values;
    }
    function getDateStr(date){
        let month = date.getMonth()+1;
        month = month<10?('0'+month):month;
        let day = date.getDate();
        day = day<10?('0'+day):day;
        return date.getFullYear()+"-"+month+"-"+day;
    }
    let valid = 1;
    function gotoQuery(obj,_valid){
        $("#All").removeClass("active");
        $("#Active").removeClass("active");
        $("#Deleted").removeClass("active");
        $(obj).addClass("active");
        valid = _valid;
        query()
    }
    function query(pageNo){
        pageNo = pageNo||1;
        let params  = {};
        //sceneStyles
        let photoStyle_mss = getPropValue("photoStyle_mss");
        let lightingStyle_mss = getPropValue("lightingStyle_mss");
        let sceneStyle_mss = getPropValue("sceneStyle_mss");
        let photoType_mss = getPropValue("photoType_mss");
        let props_mss = getPropValue("props_mss");
        let clientName_mcss = getSelectCompanyValue(clientName_select)
        let productCategory_mss = getSelectValue(productCategory_select);
        let createDate_span_start = createDate_span.getStartDate()?getDateStr(createDate_span.getStartDate()):"";
        let createDate_span_end = createDate_span.getEndDate()?getDateStr(createDate_span.getEndDate()):"";
        let creator = $("#creator").val();
        let keyword = $("#keyword").val();
        params = {
            valid,
            photoStyle_mss,
            lightingStyle_mss,
            sceneStyle_mss,
            photoType_mss,
            props_mss,
            clientName_mcss,
            productCategory_mss,
            createDate_span_start,
            createDate_span_end,
            creator,
            keyword,
            pageNo
        }
        console.log(params)
        HF.showList("product-list","${base}/admin/parameters/content_list",params,function(){
            // 页面滑动
            let scroll = new BScroll('.product-list', {
                scrollY: true,
                freeScroll: true,
                mouseWheel: true,
                probeType: 2,
                click: true
            })
        });

    }

    $(function() {

        HF.showList("product-list","${base}/admin/parameters/content_list",{valid},function(){
            // 页面滑动
            let scroll = new BScroll('.product-list', {
                scrollY: true,
                freeScroll: true,
                mouseWheel: true,
                probeType: 2,
                click: true
            })
        });


        // 选中日期
        createDate_span = new Litepicker({
            element:document.getElementById('litepicker'),
            format:'DD/MM/YYYY',
            lang:'en-US',
            numberOfMonths:1,
            numberOfColumns:1,
            showTooltip:true,
            zIndex: 9999,
            minDate: null,
            maxDate: null,
            minDays: null,
            maxDays: null,
            selectForward: !1,
            selectBackward: !1,
            splitView: !1,
            inlineMode: !1,
            singleMode: !1,
            autoApply: !0,
            allowRepick: !1,
            // showWeekNumbers: !1,
            showTooltip: !0,
            hotelMode: !1,
            disableWeekends: !1,
            scrollToDate: !0,
            mobileFriendly: !0,
            lockDaysFormat: "YYYY-MM-DD",
            lockDays: [],
            bookedDaysFormat: "YYYY-MM-DD",
            bookedDays: [],
            dropdowns: {
                minYear: 1990,
                maxYear: null,
                months: !1,
                years: !1
            },
            tooltipText: {
                one: "day",
                other: "days"
            },
            onShow: function() {
                console.log("onShow callback")
                $(".browse-box .bd .sidebar .filter-item li .childer").slideUp(300)
            },
            onHide: function() {
                console.log("onHide callback")
            },
            onSelect: function(e, t) {
                console.log("onSelect callback", e, t)
            },
            onError: function(e) {
                console.log("onError callback", e)
            },
            onChangeMonth: function(e, t) {
                console.log("onChangeMonth callback", e, t)
            },
            onChangeYear: function(e) {
                console.log("onChangeYear callback", e)
            }
        });




        // 手风琴
        $(".browse-box .sidebar .filter-item li > a").on("click", function() {
            $(this).toggleClass('open');
            $(this).parent().siblings().find('a').removeClass('open');
            $(this).parent().children('.childer').slideToggle().parent().siblings().children('.childer').slideUp();
        })


        // tabs
        $(".browse-box .content .hd .component .tabs a").on("click", function() {
            $(this).addClass("active").siblings().removeClass('active');
        })

        // 产品列表
        $(".browse-box .bd li").each(function() {
            var _this = $(this)
            var button = _this.find(".result");
            var select = _this.find(".select");
            button.on("click", function() {
                if ($(this).hasClass("open")) {
                    $(this).removeClass("open")
                    select.slideUp(300)
                } else {
                    $(".browse-box .bd li .result").find('').removeClass('open');
                    $(".browse-box .bd li .select").slideUp(300)
                    $(this).addClass("open")
                    select.slideDown(300)
                }
            })
        });

        $(document).on("click", function(e) {
            var target = $(e.target);
            if (target.closest(".browse-box .result").length == 0) {
                $(".browse-box .result").removeClass("open");
                $(".browse-box .bd li .select").slideUp(300)
            }
        });
        HF.api.get("${base}/api/parameters/company", {}).then(function (data) {
            clientName_select = xmSelect.render({
                el: '#select-client',
                prop: {
                    name: 'name',
                    value: 'name',
                },
                filterMethod: function(val, item, index, prop){
                    if(val.toUpperCase() == item.name.toUpperCase()){//把value相同的搜索出来
                        return true;
                    }
                    if(item.name.toUpperCase().indexOf(val.toUpperCase()) != -1){//名称中包含的搜索出来
                        return true;
                    }
                    return false;//不知道的就不管了
                },
                paging: true,
                language: 'en',
                filterable: true,
                tips: 'Search client name',
                data: data
            });

        });
        /**
        HF.api.get("${base}/api/parameters/options/ClientName",{}).then(function(data){
            clientName_select = xmSelect.render({
                el: '#select-client',
                language: 'en',
                filterable: true,
                tips: 'Search client name',
                data: data
            });
        });*/

        HF.api.get("${base}/api/parameters/options/ProductCategory",{}).then(function(data){
            productCategory_select = xmSelect.render({
                el: '#select-category',
                language: 'en',
                tips: 'Search product category',
                filterable: true,
                data: data
            })
        });

        // 多选框


    })
</script>
</body>

</html>
